<template>
  <div id="app">
    <functional-component
      :text="text | filter"
      @method="functionalComponentMethod"
    >
      <template v-slot:header="props">{{ props.text }}</template>
      {{ text }}
      <template v-slot:footer>{{ footer | filter1(true) | filter2 }}</template>
    </functional-component>
    <abc></abc>
    <hr />
    <!-- eslint-disable-next-line vue/valid-v-on -->
    <input type="text" @keyup.question="handleKeyup" />
    <hr />
    <my-component-1></my-component-1>
    <hr />
    <my-component-2></my-component-2>
    <hr />
    <my-component-3></my-component-3>
    <hr />
    <my-component-4></my-component-4>
    <hr />
    <my-component-5 @click="handleClick('event', $event)"></my-component-5>
    <hr />
    <my-component-6 @click.native="handleNativeClick"></my-component-6>
    <hr />
    <p v-pre>
      <abc>{{ text }}</abc>
      <span>Candy Shop</span>
    </p>
    <hr />
    <p @click="count++" v-once>{{ count }}</p>
    <hr />
    <my-component-7 :count="count" v-once></my-component-7>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: "函数式组件",
      footer: "生而为人，我很抱歉",
      count: 0,
    };
  },
  methods: {
    functionalComponentMethod() {
      console.log(this);
      console.log("this is functional component");
    },
    handleKeyup(event) {
      console.log(event.keyCode);
    },
    handleClick() {
      alert("我被点击了");
      console.log(arguments);
    },
    handleNativeClick() {
      console.log("我是 native 点击");
    },
  },
  filters: {
    filter1(val, flag) {
      // undefined 过滤器应该是一个单纯的格式化方法，不应该依赖上下文
      console.log(this);
      if (flag) {
        return "三千弱水，我只取一瓢";
      } else {
        return val;
      }
    },
    filter2(val) {
      return val.split("").reverse().join("");
    },
  },
};
</script>
